<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Basic Layout - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="../css/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../css/themes/icon.css">
	<script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../js/jquery.serializejson.min.js"></script>

</head>
<body>
        <!-- 分类按钮组 -->
        <div id="treeButtonGroup" class="easyui-panel" style="padding:5px;widows: 100px;" >
            <!-- 默认选中 -->
            <a href="#" class="easyui-linkbutton" data-type="1" data-options="toggle:true,group:'g1',selected:true">新闻分类</a>
            <a href="#" class="easyui-linkbutton" data-type="2" data-options="toggle:true,group:'g1'">产品分类</a>
            <a href="#" class="easyui-linkbutton"  data-type="3" data-options="toggle:true,group:'g1'">用户分类</a>
            <a href="#" class="easyui-linkbutton"  data-type="4" data-options="toggle:true,group:'g1'">地区分类</a>
            <a href="#" class="easyui-linkbutton" data-type="5"  data-options="toggle:true,group:'g1'">相册分类</a>
        </div>
        <!-- 功能按钮组 -->
        <div id="functionGroup" class="easyui-panel" style="padding:5px;widows: 100px;" >
            <a href="#" id="Expand" class="easyui-linkbutton"   data-options="toggle:true,group:'g1'">全部展开</a>
            <a href="#" id="merge" class="easyui-linkbutton"   data-options="toggle:true,group:'g1'">全部合并</a>
            <a href="#" id="creatroot" class="easyui-linkbutton"   data-options="toggle:true,group:'g1'">创建树形</a>
        </div>
        <!-- 分类管理右键菜单 -->
        <ul id="tt" data-options="
        animate: true,
        onContextMenu: function(e,node){
            e.preventDefault();
            $(this).tree('select',node.target);
            $('#mm').menu('show',{
                left: e.pageX,
                top: e.pageY
            });
        }
        "></ul>
        <div id="mm" class="easyui-menu" style="width:120px;">
            <div onclick="append()" data-options="iconCls:'icon-add'">插入</div>
            <div onclick="removeit()" data-options="iconCls:'icon-remove'">移除</div>
            <div onclick="updatait()" data-options="iconCls:'icon-edit'">编辑</div>
            <div class="menu-sep"></div>
            <div onclick="expand()">展开</div>
            <div onclick="collapse()">合并</div>
        </div>
        <!-- 插入编辑的对话框 -->
        <div id="dlg" class="easyui-dialog" title="插入树形" data-options="iconCls:'icon-save',closed: true" style="width:400px;height:200px;padding:10px">
            <form id="ff" class="easyui-form" method="post" data-options="novalidate:true">
                <input id="paipt" type="hidden" name="parentId" style="width:100%">
                <input id="tyipt" type="hidden" name="type" style="width:100%">
                <div style="margin-bottom:20px">
                    <input class="easyui-textbox" name="text" type="text" style="width:100%" data-options="label:'分类内容:',required:true">
                </div>
            </form>
            <div style="text-align:center;padding:5px 0">
                <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:80px">Submit</a>
                <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">Clear</a>
            </div>
        </div>
        <!-- 添加根目录对话框 -->
        <div id="dlg1" class="easyui-dialog" title="创建树形" data-options="iconCls:'icon-save',closed: true" style="width:400px;height:200px;padding:10px">
            <form id="ff1" class="easyui-form" method="post" data-options="novalidate:true">
                <input id="tyipt1" type="hidden" name="type" style="width:100%">
                <div style="margin-bottom:20px">
                    <input class="easyui-textbox" name="text" type="text" style="width:100%" data-options="label:'分类内容:',required:true,missingMessage:'请填写内容'">
                </div>
            </form>
            <div style="text-align:center;padding:5px 0">
                <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitFormroot()" style="width:80px">Submit</a>
                <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">Clear</a>
            </div>
        </div>

</body>
</html>
<script>
//定义全局变量type 用来保存自定义type  初始为1 因为默认选中的是TYPE1的按钮
var type=1;
//分类按钮 获取tyoe  并重新渲染树
$("#treeButtonGroup a").click(function(){
     type = $(this).attr('data-type');
    treeList(type);
});
//功能按钮  全部展开
$("#Expand").click(function(){
    $('#tt').tree('expandAll')
});
//全部折叠
$("#merge").click(function(){
    $('#tt').tree('collapseAll')
});
//创建树 根目录
$("#creatroot").click(function(){
    console.log(type);
    $('#ff1').form('clear');
    $('#tyipt1').val(type);
    $('#dlg1').dialog('open');
});
//清除对话框内容
function clearForm(){
    $('#ff').form('clear');
    $('#ff1').form('clear');
};
//渲染树
function treeList(type){
    $('#tt').tree({
        url:`${window.parent.globalURL}cate/list/${type}`
    });
}
//默认渲染type1
treeList(1);
//编辑插入的提交按钮函数
function submitForm(){
    $('#ff').form('submit',{
        onSubmit:function(){
            //如果表单验证通过
           if($(this).form('enableValidation').form('validate')){
                var formData = $("#ff").serializeJSON();
                //console.log(formData);
                if(formData.type.length > 0){
                    //插入
                    $.ajax({
                        url:`${window.parent.globalURL}cate`,
                        type:'post',
                        data: formData
                    }).done(function(res){
                        $('#dlg').dialog('close');
                        $('#tt').tree('reload');
                        $('#ff').form('clear');
                    })
                }else{
                    //修改
                    var t = $('#tt');
                    var node = t.tree('getSelected');
                    //console.log(node._id,$('input[name=text]').val())
                    $.ajax({
                        url:`${window.parent.globalURL}cate/${node._id}`,
                        type:'put',
                        data: {text:$('input[name=text]').val()}
                    }).done(function(res){
                        $('#dlg').dialog('close');
                        $('#tt').tree('reload');
                        $('#ff').form('clear');
                    })
                }
            }
         return false   // 表单验证
        }
    });

}
//添加根目录的
function submitFormroot(){
    $('#ff1').form('submit',{
        onSubmit:function(){
           if($(this).form('enableValidation').form('validate')){
                var formData = $("#ff1").serializeJSON();
                console.log(formData);
                    $.ajax({
                        url:`${window.parent.globalURL}cate`,
                        type:'post',
                        data: formData
                    }).done(function(res){
                        $('#dlg1').dialog('close');
                        $('#tt').tree('reload');
                        $('#ff1').form('clear');
                    })
            }
         return false   // 表单验证
        }
    });
}
//右键菜单插入
function append(){
    var t = $('#tt');
    var node = t.tree('getSelected');
    $('#ff').form('clear');
    $('#paipt').val(node._id);
    $('#tyipt').val(node.type);
    $('#dlg').dialog('open');
}
//右键菜单修改
function updatait(){
    $('#ff').form('clear');
    $('#dlg').dialog('open');
}
//右键菜单删除  需要改为POST模式 不然有长度限制
function removeit(){
    var node = $('#tt').tree('getSelected');
    //$('#tt').tree('remove', node.target);
    //console.log(node._id);
    //console.log(getChildren(node._id));
    var strr=getChildren(node._id).join(',');
    $.messager.confirm('确认对话框', '你确认删除?', function(r){
        if (r){
            $.ajax({
                url:`${window.parent.globalURL}cate/removes`,
                type:'post',
                data:{
                    ids: strr
                }
            }).done(function(res){
                $("#tt").tree('reload');
            })
        }
    });
}
//获取选中树形以及其子集的_id集合数组
function getChildren(id){
    var node = $('#tt').tree('getSelected');
    var childrenNodes = $('#tt').tree('getChildren',node.target);
    var idarr =[];
    for(var i=0;i<childrenNodes.length;i++){
        idarr[i]=childrenNodes[i]._id;
    }
    idarr.push(node._id);
    return idarr;
}
//右键菜单合并
function collapse(){
    var node = $('#tt').tree('getSelected');
    $('#tt').tree('collapse',node.target);
}
//右键菜单展开
function expand(){
    var node = $('#tt').tree('getSelected');
    $('#tt').tree('expand',node.target);
}
</script>